<template>
  <ul ref="nav">
    <li>
      <a href="javascript:void(0);" class="select" :class="{ 'item__active': active && hover === 0 }">
        <svg class="fa" aria-hidden="true">
          <use xlink:href="#icon-shexiangtou"></use>
        </svg>
        <span>收取</span>
        <i class="iconfont icon-arrow-down-filling"></i>
      </a>
      <div class="submenu">
        <ul>
          <li>收取所有账号</li>
          <li class="line"></li>
          <li>wiseyq(zhangxk)</li>
          <li>新邮箱(zhangxk)</li>
        </ul>
      </div>
    </li>
    <li>
      <a href="javascript:void(0);" class="select" :class="{ 'item__active': active && hover === 1 }">
        <svg class="fa" aria-hidden="true">
          <use xlink:href="#icon-bianji1"></use>
        </svg>
        <span>写邮件</span>
        <i class="iconfont icon-arrow-down-filling"></i>
      </a>
      <div class="submenu">
        <ul>
          <li>不适用模板</li>
          <li>HTML邮件</li>
          <li>版本更新说明</li>
          <li>英文邮件</li>
          <li class="line"></li>
          <li>纯文本邮件</li>
          <li class="line"></li>
          <li>发起会议</li>
          <li class="line"></li>
          <li>模板管理...</li>
        </ul>
      </div>
    </li>
    <li>
      <a href="javascript:void(0);" class="select" :class="{ 'item__active': active && hover === 2 }">
        <svg class="fa" aria-hidden="true">
          <use xlink:href="#icon-faxian1"></use>
        </svg>
        <span>回复</span>
        <i class="iconfont icon-arrow-down-filling"></i>
      </a>
      <div class="submenu">
        <ul>
          <li>不适用模板</li>
          <li>HTML邮件</li>
          <li>版本更新说明</li>
          <li>英文邮件</li>
          <li class="line"></li>
          <li>纯文本邮件</li>
          <li class="line"></li>
          <li>模板管理...</li>
        </ul>
      </div>
    </li>
    <li>
      <a href="javascript:void(0);" class="select" :class="{ 'item__active': active && hover === 3 }">
        <svg class="fa" aria-hidden="true">
          <use xlink:href="#icon-wode2"></use>
        </svg>
        <span>回复全部</span>
        <i class="iconfont icon-arrow-down-filling"></i>
      </a>
      <div class="submenu">
        <ul>
          <li>不适用模板</li>
          <li>HTML邮件</li>
          <li>版本更新说明</li>
          <li>英文邮件</li>
          <li class="line"></li>
          <li>纯文本邮件</li>
          <li class="line"></li>
          <li>模板管理...</li>
        </ul>
      </div>
    </li>
    <li>
      <a href="javascript:void(0);" class="select" :class="{ 'item__active': active && hover === 4 }">
        <svg class="fa" aria-hidden="true">
          <use xlink:href="#icon-yingshi"></use>
        </svg>
        <span>转发</span>
        <i class="iconfont icon-arrow-down-filling"></i>
      </a>
      <div class="submenu">
        <ul>
          <li>不适用模板</li>
          <li>HTML邮件</li>
          <li>版本更新说明</li>
          <li>英文邮件</li>
          <li class="line"></li>
          <li>纯文本邮件</li>
          <li class="line"></li>
          <li>模板管理...</li>
        </ul>
      </div>
    </li>
    <li>
      <a href="javascript:void(0);">
        <svg class="fa" aria-hidden="true">
          <use xlink:href="#icon-gouwudai"></use>
        </svg>
        <span>删除</span>
      </a>
    </li>
    <li>
      <a href="javascript:void(0);">
        <svg class="fa" aria-hidden="true">
          <use xlink:href="#icon-huangguan"></use>
        </svg>
        <span>打印预览</span>
      </a>
    </li>
    <li>
      <a href="javascript:void(0);">
        <svg class="fa" aria-hidden="true">
          <use xlink:href="#icon-tishi"></use>
        </svg>
        <span>企业微信</span>
      </a>
    </li>
  </ul>
</template>

<script>
export default {
  data () {
    return {
      active: false,
      hover: 0
    }
  },
  mounted () {
    this.$refs.nav.children.forEach((e, i) => {
      let sel = e.querySelector('.select')
      sel && sel.querySelector('.icon-arrow-down-filling').addEventListener('click', evt => {
        this.active = !this.active
        evt.stopPropagation()
      })

      e.addEventListener('mouseenter', () => {
        this.hover = i
      })
    })
    document.body.addEventListener('click', () => {
      this.active = false
    })
  }
}
</script>

<style lang="scss">
.nav-icon {
  width: 2em;
  height: 2em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}

ul {
  display: flex;
  height: 100%;
  padding: 0;
  margin: 0;
  list-style: none;

  li {
    position: relative;

    .submenu {
      position: absolute;
      top: 100%;
      left: 0;
      display: none;
      background-color: #fff;
      width: 160px;
      margin-top: 1px;
      border: 1px solid #A3A7AA;
      border-radius: 3px;
      box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);

      ul {
        flex-direction: column;
        font-size: 12px;

        li {
          display: flex;
          align-items: center;
          height: 28px;
          padding-left: 2em;

          &.line {
            height: 0;
            margin: 1px 0;
            border-bottom: 1px solid #E4E4E4;
          }

          &:hover {
            color: #fff;
            background: linear-gradient(0deg, #678097, #7994AE);
          }
        }
      }
    }
  }

  li a {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 0 10px;
    border-radius: 2px;
    box-sizing: border-box;
    border: 1px solid transparent;
    color: #000000;
    font-size: 12px;
    text-decoration: none;

    &:hover,
    &.item__active {
      border: 1px solid #87a0b8;
      background: linear-gradient(0deg, #bbd1e5, #dbedfc);

      .iconfont {
        border-left: 1px solid #87a0b8;
      }
    }

    &.item__active {
      background: linear-gradient(0deg, #95ABC1, #AEC4D9);
    }

    &.select {
      padding-right: 2px;

      // .icon-arrow-down-filling:hover {
      //   background: linear-gradient(0deg, #b4cce2, #d3eafd);
      // }
    }

    &.item__active+.submenu {
      display: block;
    }

    .fa {
      display: flex;
      width: 23px;
      height: 23px;
      margin-right: 10px;
      justify-content: center;
      align-items: center;
      vertical-align: -0.15em;
      fill: currentColor;
      overflow: hidden;
    }

    .iconfont {
      display: flex;
      height: 100%;
      margin-left: 5px;
      border-left: 1px solid transparent;
      justify-content: center;
      align-items: center;
      font-size: 12px;
      color: #55687C;
    }
  }
}
</style>
